import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css'
import '../css/index.scss'
import Add from '../add'
import See from '../see'
import Edit from '../edit'
import { Table, Button, Select, Space, Modal, Form, Input,Tooltip, message, InputNumber } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export default function Forms() {
    // 表格数据
    const [data, setdata] = useState(
        [
            {
                id: 1,
                key: 1,
                name: '春节献礼',
                position: '首页',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 1,
                frequency: 54646,
                order: 5468,
                status: 1
            },
            {
                id: 2,
                key: 2,
                name: '好友分享赢免息机会',
                position: '轮播图',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 1,
                frequency: 4646,
                order: 468,
                status: 1
            },
            {
                id: 3,
                key: 3,
                name: '集赞领豪礼',
                position: '等待页面',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 2,
                frequency: 5646,
                order: 548,
                status: 1
            },
            {
                id: 4,
                key: 4,
                name: '满1000元得500元',
                position: '首页底部',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 1,
                frequency: 14646,
                order: 468,
                status: 1
            },
            {
                id: 5,
                key: 5,
                name: '冲500元送500元代金券',
                position: '首页侧边栏',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 2,
                frequency: 646,
                order: 58,
                status: 1
            },
            {
                id: 6,
                key: 6,
                name: '元旦钜惠',
                position: '子页面顶部',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 1,
                frequency: 646,
                order: 568,
                status: 1
            },
            {
                id: 7,
                key: 7,
                name: '新年钜惠',
                position: '详情页',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 1,
                frequency: 514646,
                order: 54168,
                status: 1
            },
            {
                id: 8,
                key: 8,
                name: '圣诞钜惠',
                position: '购买页',
                timer: '2018-08-02 15:47:44 至 2018-08-02 15:47:44',
                state: 2,
                frequency: 254646,
                order: 25468,
                status: 1
            },

        ]
    )
    const [datas, setdatas] = useState()
    const datal = (a) => {
        setdatas(() => ([...a]))
    }
    useEffect(() => {
        console.log('123asd');
        datal(data)
    }, []);
    // 表格
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 70,
        },
        {
            title: '广告名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            width: 120,
        },
        {
            title: '广告位置',
            dataIndex: 'position',
            key: 'position',
            align: 'center',
            width: 120,
        },
        {
            title: '时间',
            dataIndex: 'timer',
            key: 'timer',
            align: 'center',
            render: (text)=><Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
            return {
              style: {
                maxWidth: 100,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer'
              }
            } 
        }
        },
        {
            title: '当前状态',
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            width: 90,
            render(text) {
                return text === 1 ? '在线' : '下线'
            }
        },
        {
            title: '点击次数',
            dataIndex: 'frequency',
            key: 'frequency',
            align: 'center',
            width: 90,
        },
        {
            title: '生成订单',
            dataIndex: 'order',
            key: 'order',
            align: 'center',
            width: 90,
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 100,
            render: text => <div><Space><Button size="small" onClick={() => see(text)}>查看</Button><Button size="small" onClick={() => edits(text)}>编辑</Button><Button size="small" danger onClick={() => dels(text)}>删除</Button></Space></div>,
        },
    ];
    const [seedatas, setseedatas] = useState({})
    // 查看
    const see = (text) => {
        console.log(text);
        let a = datas.filter((item) => item.id === text)
        setseedatas(() => a[0])
        setVisible(true)
    }
    // 编辑
    const edits = (text) => {
        setVisible3(true)
    }
    // 添加广告
    const adds = (a) => {
        console.log('aaa',a);
    }
    const addsclose = () => {
        setVisible2(true)
    }
    // 删除
    const dels = (text) => {
    const { confirm } = Modal;
        let a = datas.filter((item) => item.id !== text)
        confirm({
            title: '真的确认删除吗?',
            icon: <ExclamationCircleOutlined />,
            content: '删除之后将无法恢复!',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              console.log('OK');
              datal(a)
            },
            onCancel() {
              console.log('Cancel');
            },
          });
       
    }
    // 搜索框
    const [datax, setdatax] = useState(data)
    const setdataxs = (b) => {
        setdatax(() => ([...b]))
    }
    const search = (e) => {
        return datax.filter((item) => e === item.name || e === item.position || e === item.state)
    }
    // 账号搜索
    const couponName = (e) => {
        if (e.target.value) {
            let a = search(e.target.value)
            if (a.length !== 0) {
                setdataxs(a)
                datal(a)
                console.log(a);
                message.success('搜索成功');
            } else {
                datal(data)
                setdatax(() => data)
                message.error('暂无数据');
            }
        } else {
            datal(data)
            message.error('不能为空哦');
        }
    }
    // 昵称搜索
    const couponName2 = (e) => {
        if (e.target.value) {
            let a = search(e.target.value)
            if (a.length !== 0) {
                setdataxs(a)
                datal(a)
                message.success('搜索成功');
                console.log(a);
            } else {
                datal(data)
                setdatax(() => data)
                message.error('暂无数据');
                console.log(a);
            }
        } else {
            datal(data)
            message.error('不能为空哦');
        }
    }
    // 会员等级搜索
    const gender = (e) => {
        let a = search(e)
        if (a.length !== 0) {
            setdataxs(a)
            datal(a)    
            message.success('搜索成功');
            console.log('1', a);
        } else {
            datal(data)
            setdatax(() => data)
            message.error('暂无数据');
            console.log('2', a);
        }
    }
    // 排序
    const sortpulas = (property) => {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }
    const sorts = (e) => {
        let a = data
        if (e === 1) {
            a.sort(sortpulas('state'))
            console.log(a);
            datal(a)
        } else if (e === 2) {
            a.sort(sortpulas('frequency'))
            console.log(a);
            datal(a)
        } else {
            a.sort(sortpulas('order'))
            console.log(a);
            datal(a)
        }

    }
    // 表格状态
    const [visible, setVisible] = useState(false)
    const [visible2, setVisible2] = useState(false)
    const [visible3, setVisible3] = useState(false)
    // 表格选择框
    const state = {
        selectedRowKeys: [],
        loading: false,
    };

    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
    };

    const { loading, selectedRowKeys } = state;
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    return (
        <div>
            <div className="boders">
                <Form
                    layout="inline"
                >
                    <Form.Item className="bg">
                        <span className="text">筛选查询</span>
                    </Form.Item>
                    <Form.Item label="广告名称" name='a' style={{ width: '25%', padding: 10 }}>
                        <Input placeholder="请输入帮助标题" onBlur={couponName} />
                    </Form.Item>
                    <Form.Item label="广告位置" name='b' style={{ width: '25%', padding: 10 }}>
                        <Input placeholder="请输入帮助标题" onBlur={couponName2} />
                    </Form.Item>
                    <Form.Item label="当前状态" name='c' style={{ width: '25%', padding: 10, textAlign: 'left' }}>
                        <Select placeholder="请选择帮助分类" onChange={gender} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value={1}>在线</Select.Option>
                            <Select.Option value={2}>下线</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </div>
            <div className="from">
                <div className="bg">
                    <span className="text">数据列表</span>
                    <div className="right">
                        <Button onClick={() => setVisible2(true)}>添加广告</Button>
                        <Select placeholder="请选择排序方式" style={{ width: 150 }} onChange={sorts} getPopupContainer={triggerNode => triggerNode.parentNode}>
                            <Select.Option value={1}>当前状态</Select.Option>
                            <Select.Option value={2}>点击次数</Select.Option>
                            <Select.Option value={3}>生成订单</Select.Option>
                        </Select>
                    </div>
                </div>

                <Table bordered rowSelection='checkbox ' columns={columns} dataSource={datas} />

                <Modal
                    getContainer={false}
                    title="查看详情"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={600}
                    footer={null}
                >
                    <See seedatas={seedatas} />
                </Modal>

                <Modal
                    getContainer={false}
                    title="添加广告"
                    centered
                    visible={visible2}
                    onOk={() => setVisible2(false)}
                    onCancel={() => setVisible2(false)}
                    width={600}
                    footer={null}
                >
                    <Add  adds={adds} addsclose={addsclose}/>
                </Modal>

                <Modal
                    getContainer={false}
                    title="编辑广告"
                    centered
                    visible={visible3}
                    onOk={() => setVisible3(false)}
                    onCancel={() => setVisible3(false)}
                    width={600}
                    footer={null}
                >
                    <Edit seedatas={seedatas} />
                </Modal>
            </div>
        </div>
    )
}
